<script setup lang="ts">
import { Ref, computed, onMounted, ref, toValue, unref } from 'vue'
import { Search, Refresh, CirclePlus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addFeedback, findFeedback, reqaddFeedback, reqfindFeedback, reqfindFeedbackById, reqmodifyFeedback, reqremoveFeedback } from '../../api/AFeedback';
import { useStore } from '@/pinna';
const infoStore = useStore()
onMounted(() => {
    findData()
})

// 搜索栏
const pageNo: Ref<number> = ref(1)
const pageSize = ref(10)
const searchFrom = ref<findFeedback>({
    contactInformation: ''
})

const reset = () => {
    searchFrom.value = {
        contactInformation: ''
    }
    findData()
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    findData()
}

const handleCurrentChange = (val: number) => {
    pageNo.value = val
    findData()
}

const total: Ref<number> = ref(0)
const tableData: Ref<Partial<addFeedback[]>> = ref([])

const findData = async () => {
    await reqfindFeedback({
        pageNo: toValue(pageNo),
        pageSize: toValue(pageSize),
        ...toValue(searchFrom)
    }).then((res: any) => {
        const { code, data, total: tableTotal } = res

        if (code === 200) {
            tableData.value = data
            total.value = tableTotal

        } else {
            ElMessage({
                message: '请求异常',
                type: 'warning'
            })
        }
    })
}

let editId = ref('')

const editRoleInfo = async (id: string) => {
    findRoleInfo(id, 'edit')
    editId.value = id
}

const findRoleInfo = async (id: string, type?: 'edit' | 'add') => {
    await reqfindFeedbackById({ id }).then((res: any) => {
        const { data } = res
        console.log(data);

        addHsotForm.value = data

        dialogHostTitle.value = type === 'edit' ? '编辑服务反馈信息' : '查看服务反馈信息'
        dialogHost.value = true
    })
}

const deleteRoleInfo = async (id: string) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await reqremoveFeedback({ id }).then((res: any) => {
                if (res.code == 200) {
                    findData()
                    ElMessage({
                        message: '删除成功',
                        type: 'success'
                    })
                }
            })
        })

}


// 添加服务反馈信息弹窗
let dialogHost = ref(false)
let dialogHostTitle = ref('添加服务反馈信息')
const formLabelWidth = '140px'
const addHsotForm = ref<addFeedback>({
    "serviceQuality": "",
    "staffServiceAttitude": "",
    "facilitiesAndEquipment": "",
    "overallRating": "",
    "commentsAndSuggestions": "",
    "contactInformation": ""
})

const resetDialogHostFrom = () => {
    addHsotForm.value = {
        "serviceQuality": "",
        "staffServiceAttitude": "",
        "facilitiesAndEquipment": "",
        "overallRating": "",
        "commentsAndSuggestions": "",
        "contactInformation": ""
    }
}

const addHostDialog = () => {
    resetDialogHostFrom()
    dialogHostTitle.value = '添加服务反馈信息'
    dialogHost.value = true
}

const addHostSubmit = async () => {
    if (dialogHostTitle.value == '添加服务反馈信息') {
        await reqaddFeedback(unref(addHsotForm)).then((res: any) => {
            const { code } = res

            if (code === 200) {
                dialogHost.value = false
                findData()
                ElMessage({
                    message: '添加服务反馈信息成功',
                    type: 'success'
                })

            } else {
                const message = res.msg || '请求异常'
                ElMessage({
                    message: message,
                    type: 'warning'
                })
            }
        })
    } else if (dialogHostTitle.value == '编辑服务反馈信息') {
        await reqmodifyFeedback({ ...unref(addHsotForm), id: unref(editId) }).then((res: any) => {
            const { code } = res

            if (code === 200) {
                dialogHost.value = false
                findData()
                ElMessage({
                    message: '编辑服务反馈信息成功',
                    type: 'success'
                })

            } else {
                const message = res.msg || '请求异常'
                ElMessage({
                    message: message,
                    type: 'warning'
                })
            }
        })
    }

}

const isReadonlyHandler = computed(() => {
    return dialogHostTitle.value !== '查看服务反馈信息'
})

</script>

<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span><strong>服务反馈信息管理</strong></span>
            </div>
        </template>
        <div class="query-input">
            <div><span>联系信息: </span>
                <el-input v-model="searchFrom.contactInformation" placeholder="请输入联系信息" />
            </div>
            <el-button type="primary" @click="findData()">
                <el-icon>
                    <Search />
                </el-icon>
                查询
            </el-button>
            <el-button type="danger" @click="reset()">
                <el-icon>
                    <Refresh />
                </el-icon>
                重置
            </el-button>
        </div>

    </el-card>

    <el-card>
        <!-- <div>
            <el-button key="'添加服务反馈信息'" @click="addHostDialog()" :icon="CirclePlus" type="primary" text bg
                class="addUser">添加服务反馈信息</el-button>
        </div> -->
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="userName" label="用户" />
            <el-table-column prop="serviceQuality" label="服务质量" />
            <el-table-column prop="staffServiceAttitude" label="员工服务态度" width="150" />
            <el-table-column prop="facilitiesAndEquipment" label="设施和设备" />
            <el-table-column prop="overallRating" label="总体评价" />
            <el-table-column prop="commentsAndSuggestions" label="评论和建议" />
            <el-table-column prop="contactInformation" label="联系信息" />
            <el-table-column fixed="right" label="操作" width="280">
                <template #default="scope">
                    <el-space wrap>
                        <el-button type="primary" size="small" plain @click="findRoleInfo(scope.row.id)">查看</el-button>
                        <el-button v-if="infoStore.$state.info.role == 'admin'" type="danger" size="small" color="red" plain
                            @click="deleteRoleInfo(scope.row.id)">删除</el-button>
                    </el-space>
                </template>
            </el-table-column>

        </el-table>

        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :background="false" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </el-card>
    <!-- 添加服务反馈信息弹框 -->
    <el-dialog v-model="dialogHost" :title="dialogHostTitle">
        <el-form :model="addHsotForm">
            <el-form-item label="服务质量:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.serviceQuality" autocomplete="off" placeholder="请输入服务质量"
                    :disabled="!isReadonlyHandler" />
            </el-form-item>

            <el-form-item label="员工服务态度:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.staffServiceAttitude" placeholder="请输入员工服务态度"
                    :disabled="!isReadonlyHandler" />
            </el-form-item>
            <el-form-item label="设施和设备:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.facilitiesAndEquipment" placeholder="请输入设施和设备"
                    :disabled="!isReadonlyHandler" />
            </el-form-item>
            <el-form-item label="总体评价:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.overallRating" placeholder="请输入总体评价" :disabled="!isReadonlyHandler" />
            </el-form-item>
            <el-form-item label="评论和建议:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.commentsAndSuggestions" placeholder="请输入评论和建议"
                    :disabled="!isReadonlyHandler" />
            </el-form-item>
            <el-form-item label="联系信息:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.contactInformation" placeholder="请输入联系信息" :disabled="!isReadonlyHandler" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogHost = false">取消</el-button>
                <el-button v-if="isReadonlyHandler" type="primary" @click="addHostSubmit()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.el-input {
    margin-right: 5px;
    width: 400px;
    margin-right: 16px;
}

.query-input {
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    display: flex;
    gap: 10;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    height: 70px;
}

.el-card {
    margin-bottom: 10px;
}

.demo-pagination-block {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.addUser {
    float: right;
    margin-right: 10px;
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

/* 
.el-input & .el-textarea  {
  width: 300px;
} */
.el-textarea {
    width: 400px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>